<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryFormRef" :inline="true">
      <el-form-item prop="username" label="用户名">
        <el-input v-model="queryForm.username" placeholder="请输入用户名" @press-enter="handleQuery" />
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-select v-model="queryForm.status" placeholder="请选择系统登录日志状态">
          <el-option :value="2">正常</el-option>
          <el-option :value="1">关闭</el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="ipaddr" label="IP地址">
        <el-input v-model="queryForm.ipaddr" placeholder="请输入IP地址" />
      </el-form-item>
      <el-form-item>
        <el-space>
          <el-button type="primary" @click="handleQuery" icon="Search"> 搜索</el-button>
          <el-button @click="handleResetQuery" icon="Refresh">重置</el-button>
        </el-space>
      </el-form-item>
    </el-form>

    <el-divider />

    <div class="action">
      <el-space>
        <el-button type="primary" status="danger" :disabled="selectedKeys.length === 0" @click="handleBatchDelete"
          icon="Delete"> 批量删除</el-button>
      </el-space>
    </div>

    <!-- <el-table :data="tableData" :columns="columns" row-key="id"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }" :pagination="{
        'show-total': true,
        'show-jumper': true,
        'show-page-size': true,
        current: currentPage,
        total: pager.count,
      }" v-model:selectedKeys="selectedKeys" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
      <template #status="{ record }">
        <el-tag v-if="record.status == 2" type="success">正常</el-tag>
        <el-tag v-if="record.status == 1" type="danger">失败</el-tag>
      </template>
      <template #loginTime="{ record }">
        {{ parseTime(record.loginTime) }}
      </template>
      <template #action="{ record }">
        <el-popconfirm content="是否删除当前数据？" @ok="removeSysLoginLogInfo([record.id])">
          <el-button text type="primary" status="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table> -->
    <el-table :data="tableData" row-key="id">
      <el-table-column label='用户名' prop='username'></el-table-column>
      <el-table-column label='类型' prop='msg'></el-table-column>
      <el-table-column label='状态' prop='status'>
        <template #default="scope">
          <el-tag v-if="scope.row.status == 2" type="success">正常</el-tag>
          <el-tag v-if="scope.row.status == 1" type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label='IP地址' prop='ipaddr'></el-table-column>
      <el-table-column label='登陆时间' prop='loginTime'>
        <template #default="scope">
          {{ parseTime(scope.row.loginTime) }}
        </template>
      </el-table-column>
      <el-table-column label='操作' prop='action'>
        <template #default="scope">
          <el-popconfirm content="是否删除当前数据？" @ok="removeSysLoginLogInfo([scope.row.id])">
            <el-button text type="primary" status="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :page-size="10" v-model="currentPage"  layout="prev, pager, next" :total="pager.count"
    @current-change="handlePageChange" />


  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { getSysLoginLog, removeSysLoginLog } from '@/api/admin/sys-login-log';
import { parseTime } from '@/utils/parseTime';

const { proxy } = getCurrentInstance();

const queryFormRef = ref({});

// 当前页
const currentPage = ref(1);

// Pager
const pager = {
  count: 0,
  pageIndex: 1,
  pageSize: 10,
};

// 表格多选
const selectedKeys = ref([]);

const queryForm = reactive({});

const tableData = ref([]);
const columns = [
  { title: '用户名', dataIndex: 'username' },
  { title: '类型', dataIndex: 'msg' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  { title: 'IP地址', dataIndex: 'ipaddr' },
  { title: '登陆时间', dataIndex: 'loginTime', slotName: 'loginTime' },
  { title: '操作', slotName: 'action', slotName: 'action' },
];

// 查询
const handleQuery = () => {
  getSysLoginLogInfo({ ...pager, ...queryForm });
}

// 重置查询
const handleResetQuery = () => {
  queryFormRef.value.resetFields();
  handlePageChange(1);
};

// 页码改变
const handlePageChange = (page) => {
  currentPage.value = page;

  pager.pageIndex = page;
  getSysLoginLogInfo({ ...pager, ...queryForm });
};

// 每页数据量
const handlePageSizeChange = (pageSize) => {
  pager.pageSize = pageSize;
  getSysLoginLogInfo({ ...pager, ...queryForm });
};

// 批量删除
const handleBatchDelete = () => {
  proxy.$modal.confirm({
    title: '注意',
    content: '是否删除当前所有勾选数据？',
    onOk: () => {
      removeSysLoginLogInfo(selectedKeys.value);
    },
    onCancel: () => {
      proxy.$message.info('已取消操作');
    }
  })
}

// 获取登陆日志信息
const getSysLoginLogInfo = async (params = {}) => {
  const res = await getSysLoginLog(params);
  const { count, list, pageIndex, pageSize } = res.data;

  tableData.value = list;
  Object.assign(pager, { total: count, pageIndex, pageSize });
};

// 删除登陆日志信息
const removeSysLoginLogInfo = async (ids) => {
  const res = await removeSysLoginLog({ ids });
  proxy.$message.success(res.msg);

  getSysLoginLogInfo();
};

onMounted(async () => {
  getSysLoginLogInfo();
});
</script>

<style lang="scss">
.action {
  margin-bottom: 8px;
}
</style>
